<script setup>
onMounted(() => {
  const canvas = document.getElementById('canvas')

  const ctx = canvas.getContext('2d')

  ctx.strokeStyle = 'rgba(255, 0, 0, 1)'
  // ctx.fillRect(10, 10, 55, 50)
  //
  // ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'
  // ctx.fillRect(30, 30, 55, 50)

  ctx.beginPath()
  ctx.arc(75, 75, 50, 0, Math.PI * 2, true) // 圆
  ctx.moveTo(90, 95)
  ctx.arc(75, 95, 15, 0, Math.PI, true) // 口 (逆时针)
  ctx.moveTo(65, 65)
  ctx.arc(60, 65, 5, 0, Math.PI * 2, true) // 左眼
  ctx.moveTo(95, 65)
  ctx.arc(90, 65, 5, 0, Math.PI * 2, true) // 右眼
  ctx.stroke()
})
</script>

<template>
  <div>
    <canvas id="canvas" b="1 solid" height="150" width="150" />
  </div>
</template>
